<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>设置</title>
    <link rel="stylesheet" href="../common/style/reset.css" />
    <style>
      .row-box {
        display: flex;
        align-items: center;
      }

      .row-box {
        margin-top: 20px;
      }

      .row-box span {
        width: 100px;
      }
      .row-box .row-slider {
        flex: 1;
      }

      .pc-icon-box {
        display: flex;
        flex-wrap: wrap;
        padding: 5px;
        background-color: var(--bg-contenteditable);
        border-radius: 8px;
      }

      .pc-icon-box li {
        list-style: none;
        padding: 2.5px;
        margin: 5px;
        width: 35px;
        height: 35px;
        border-radius: 2px;
      }

      .pc-icon-box li div {
        font-size: 0.7rem;
        text-overflow: ellipsis;
        text-align: center;
        overflow: hidden;
        white-space: nowrap;

      }

      .pc-icon-box li img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      /* 边框旋转的动画 */
      .select-icon {
        background-color: rgba(0, 0, 0, 0.6);
      }
    </style>
  </head>
  <body>
    <tab-win>
      <div class="row-box">
        <span>无字模式：</span>
        <liu-switch class="liu-switch"></liu-switch>
      </div>
      <div class="row-box">
        <span>间距：</span>
        <liu-slider class="row-slider slider-spacing" value="10"></liu-slider>
      </div>
      <div class="row-box">
        <span>图标大小：</span>
        <liu-slider class="row-slider slider-icon-size" value="30"></liu-slider>
      </div>
      <div class="row-box">
        <span>背景透明度：</span>
        <liu-slider
          class="row-slider slider-bg-opacity"
          value="40"
        ></liu-slider>
      </div>
      <ul class="pc-icon-box"></ul>
    </tab-win>
  </body>
  <script type="module">
    import TabWin from "../components/Window.js";
    import LiuSlider from "../components/Slider.js";
    import LiuSwitch from "../components/Switch.js";
    customElements.define("tab-win", TabWin);
    customElements.define("liu-slider", LiuSlider);
    customElements.define("liu-switch", LiuSwitch);

    let iconsInfo = [];
    let data = {
      selectIcons: [],
      spacing: 10,
      iconSize: 30,
      opacity: 40,
      switch: false
    };

    const sliderSpacingEl = document.querySelector(".slider-spacing");
    const sliderIconSizeEl = document.querySelector(".slider-icon-size");
    const sliderBgOpacity = document.querySelector(".slider-bg-opacity");
    const pcIconBoxEl = document.querySelector(".pc-icon-box");
    const switchEl = document.querySelector(".liu-switch");

    if (window.ipcRenderer) {
      window.ipcRenderer.on("init", (event, initData) => {
        if(initData)data = initData;
        sliderSpacingEl.setAttribute("value", data.spacing);
        sliderIconSizeEl.setAttribute("value", data.iconSize);
        sliderBgOpacity.setAttribute("value", data.opacity);
        switchEl.setAttribute('checked', data.switch)
        initRender();
        // renderSelectIcon();
      });
    }

    const renderSelectIcon = () => {
      let liEls = pcIconBoxEl.querySelectorAll("li");
      iconsInfo.forEach((icon, index) => {
        let bool = data.selectIcons.some((item) => item.url === icon.url);
        if (bool) {
          liEls[index].classList.add("select-icon");
        }
      });
    };

    const initRender = () => {
      if (window.utools) {
        let desktopUrl = utools.getPath("desktop");
        iconsInfo = window.getIcons(desktopUrl);
        // data.selectIcons
        let filterData = data.selectIcons.filter((item) => {
          let bool = iconsInfo.some((icon) => {
            return icon.url === item.url;
          });
          return !bool
        });
        iconsInfo = [...iconsInfo, ...filterData]
        let html = "";
        iconsInfo.forEach((icon, index) => {
        let bool = data.selectIcons.some((item) => item.url === icon.url);

          html += `<li class="${bool ? 'select-icon' : ''}" title="${icon.name}" ><img data-index="${index}" url="${icon.url}" src="${icon.icon}" alt=""><div>${icon.name}</div></li>`;
        });
        pcIconBoxEl.innerHTML = html;
      }
    };

    switchEl.addEventListener("change", (e) => {
      data.switch = e.detail.checked;
      if (window.toParentPage) {
        window.toParentPage(data);
      }
    });

    sliderSpacingEl.addEventListener("change", (e) => {
      data.spacing = e.detail.value;
      if (window.toParentPage) {
        window.toParentPage(data);
      }
    });
    sliderIconSizeEl.addEventListener("change", (e) => {
      data.iconSize = e.detail.value;
      if (window.toParentPage) {
        window.toParentPage(data);
      }
    });

    sliderBgOpacity.addEventListener("change", (e) => {
      data.opacity = e.detail.value;
      if (window.toParentPage) {
        window.toParentPage(data);
      }
    });

    pcIconBoxEl.addEventListener("click", (e) => {
      let index = e.target.getAttribute("data-index");
      if (index) {
        let info = iconsInfo[parseInt(index)];
        let bool = e.target.parentElement.classList.toggle("select-icon");
        if (bool) {
          data.selectIcons.push(info);
          if (window.toParentPage) {
            window.toParentPage(data, { addSelectIcon: info });
          }
        } else {
          data.selectIcons = data.selectIcons.filter(
            (item) => item.url != info.url
          );
          if (window.toParentPage) {
            window.toParentPage(data, { deleteSelectIcon: info });
          }
        }
      }
    });
  </script>
</html>
